<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="layout">
  <head>
  	<title>比赛报名管理</title>
    <script type="text/javascript">
    	var id = getQueryString("id");
    	function findDate(beginAt, endAt, flg){
    		var head = [{name:'报名人数（提交）', show:true, open:true},{name:'报名过审人数', show:true, open:true},
    			        {name:'报名成功人数', show:true, open:true},{name:'报名收费', show:false, open:false},
    			        {name:'已拒绝', show:true, open:true},{name:'待审核', show:true, open:true}];
    		//echart加载图表
    		$.ajaxData({url:"../info-detail-count-detail", data:{id:id,beginAt:beginAt,endAt:endAt,flg:flg}, success:function(ret){
    			var x=[];
				var yData = [];
    			$.each(ret, function(i,v){
    				x.unshift(v.date);
    				v.countHtml = '';
    				$.each(head, function(i2,v2){
    					v.countHtml += "<td>"+(v[v2.name] == null ? 0 : v[v2.name]) +"</td>"
    				});
    			});
    			$.each(head, function(i,v){
    				if(v.show){
	    				var show = (i==0?true:false);
	    				var headData = {name:v.name,show:v.open,data:[]};
	    				$.each(ret, function(i2,v2){
	    					var count = (v2[v.name]==null?0:v2[v.name])
	    					headData.data.unshift(count)
	       				});
	    				yData.push(headData);
    				}
    			})
   				$("#echarts").echartsLine({xData:x, yData:yData});
    		}});
    		$("#pageJinji").pageReload({beginAt:beginAt,endAt:endAt,flg:flg});
    	};
    	
        function beforeDate(day, obj, flg){
    		if(obj != null){
    			$(".detail-s-bar").removeClass("active");
    			$(obj).addClass("active");
    		}
    		var beginAt ="";
    		var endAt = "";
    		if(day != null){
    			beginAt = new Date().DateAdd(day).Format("yyyy-MM-dd");
        		endAt = new Date().Format("yyyy-MM-dd");
    		}
    		
    		findDate(beginAt, endAt, flg);
    	};
    	
     	function updateApply(applyId,state){
     		if(!confirm("确定要审核这条数据吗？")) { return; }
    		$.ajax({
    		  url: 'updateapply',
    		  type: 'POST',
    		  dataType : "json",
    		  data: {
    			  id : applyId,
    			  verify : state
    		  },
    		  success: function(obj){
    			  if(obj.success){
    				  $.ajaxData({url:"info-detail-count", data:{evaluateId:id}, success:function(ret){
    		    		  $("#infoCounts").loadData(ret);
    		    		  $("#pageJinji").pageReload();
    		    	  }});
    			  }
    		  }
    		});
    	};
    	function export_execl(){
    		var beginAt = $("#pageJinji").getPageData()["beginAt"];
    		var endAt = $("#pageJinji").getPageData()["endAt"];
    		location.href="exportExecl?id="+id+"&beginAt="+beginAt+"&endAt="+endAt;
        };
    	
    	$(function(){
    		setMenu("报名管理")
    		
    		//表格加载数据
    		$("#pageJinji").page({url:"getTableData",data:{evaluateId:id},success:function(obj){
	    		$.each(obj.obj.content, function(i,v){
	    			v.createdAt = new Date(v.createdAt).Format("yyyy.MM.dd");
	    			if(v.successTime!=null){
	    				v.successTime = new Date(v.successTime).Format("yyyy.MM.dd");
	    			}
	    		});
	    		$("#pageJinjiTabel").loadData(obj.obj);
	    		$("span[data='look']").each(function(){
	    			var text = $(this).attr("data-text");
	    			if(text != ''){
	    				var textHtml = "";
	    				var textObj = eval("("+text+")");
	    				$.each(textObj, function(i,v){
	    					textHtml += "<div>"+i+":"+v+"</div>";
	    				});
	    				$(this).jjinfo(textHtml);
	    			}
	    		});
	    	}});
    		
    		$.ajaxData({url:"info-detail-count", data:{evaluateId:id}, success:function(ret){
    			$("#infoCounts").loadData(ret);
    		}});
    		var beginAt = new Date().DateAdd(-7).Format("yyyy-MM-dd");
    		var endAt = new Date().Format("yyyy-MM-dd");
    		var dateRange = new pickerDateRange('listStageDate', {
	            isTodayValid : false,
	            startDate:beginAt,
	            endDate:endAt,
	            defaultText : ' 至 ',
	            theme : 'ta',
	            success : function(obj) {
	            	$(".detail-s-bar").removeClass("active");
	            	if(obj.endDate == ''){
	            		obj.endDate = obj.startDate;
	            	}
	            	if(obj.endDate == ''){
	            		return;
	            	}
	            	findDate(obj.startDate,obj.endDate,0);
	            }
	        });
    		$('.opt_sel').on('click',function(e){setTimeout(function(){ $('#listStageDate').click();}, 0)});
    		beforeDate(-14,null,14);
    	});
    </script>
  </head>
  <body>
	<div layout:fragment="content" class="content" id="modal">
         	
         	<div class="modal">
         		<div class="detail">
         			<div class="detail-top">
         				<label class="detail-title">关键数据<i class="icon-help"></i></label>
         			</div>
         			<div class="detail-cont">
         				<script type="text/template" id="infoCounts">
         				<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">报名提交人数</div>
         						<div class="detail-c-count"><strong>#{bmCount}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{bmCountDay}#</label>
         					</div>
         				</div>
						<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">报名成功</div>
         						<div class="detail-c-count"><strong>#{successCount}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{successCountDay}#</label>
         					</div>
         				</div>
						<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">报名过审</div>
         						<div class="detail-c-count"><strong>#{passCount}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{passCountDay}#</label>
         					</div>
         				</div>
						<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">待审核</div>
         						<div class="detail-c-count"><strong>#{waitCount}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{waitCountDay}#</label>
         					</div>
         				</div>
						<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">有作品人数</div>
         						<div class="detail-c-count"><strong>#{workApplyCount}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{workApplyCountDay}#</label>
         					</div>
         				</div>
						<div class="detail-c-box">
         					<div class="detail-c">
         						<div class="detail-c-label">报名付费</div>
         						<div class="detail-c-count"><strong>#{orderSum}#</strong></div>
								<label class="detail-c-l">今日</label>
								<label class="detail-c-c">#{orderSumDay}#</label>
         					</div>
         				</div>
						</script>
         			</div>
         			
         			<div class="detail-row">
	       				<div class="detail-s">
	       					<span class="detail-s-bar" onclick="beforeDate(-7, this,7)"><span class="detail-s-btn">7天</span></span>
	       					<span class="detail-s-bar active" onclick="beforeDate(-14, this,14)"><span class="detail-s-btn">14天</span></span>
	       					<span class="detail-s-bar " onclick="beforeDate(-30, this,30)"><span class="detail-s-btn">30天</span></span>
	       					<span class="detail-s-bar" onclick="beforeDate(null, this,100)"><span class="detail-s-btn">全部</span></span>
							<div class="ta_date" style="">
		                        <span class="date_title" id="listStageDate">请选择日期</span>
		                        <a class="opt_sel" href="javascript:void(0)">
		                            <i class="i_orderd"></i>
		                        </a>
		                    </div>
		                    <div id="datePicker"></div>
	       				</div>
       				</div>
       				<div style="height: 300px;" id="echarts"></div>
         			
       				<div class="detail-table">
       				<h4 class="detail-table-title">
						报名用户
						<span class="detail-table-more">
							<a href="javascript:export_execl();"><i class="icon_export"></i>导出CSV</a>
						</span>
					</h4>
				    <div class="table_list">
		               <div class="">
		                   <table class="table">
		                       <thead>
		                           <tr>
		                      		   <th width="5%" class="order desc" data="asc" onclick="$('#pageJinji').pageReload({sort:'createdAt,'+$(this).attr('data')});">报名提交时间</th>
		                               <th width="5%" >参赛编号</th>
		                               <th width="12%" >用户（ID）</th>
		                               <th width="5%" >姓名</th>
		                               <th width="8%" >电话</th>
		                               <th width="5%" >组别</th>
		                               <th width="12%" >渠道</th>
		                               <th width="5%" >报名信息</th>
		                               <th width="5%" >
										<div class="caret">
                                                <div class="caret-menu">
                                                	<span class="btn active" onclick="$('#pageJinji').pageReload({verify:''});">全部状态</span>
                                                    <span class="btn" onclick="$('#pageJinji').pageReload({verify:'NotPass'});">未通过</span>
                                                    <span class="btn" onclick="$('#pageJinji').pageReload({verify:'Waiting'});">待审核</span>
                                                    <span class="btn" onclick="$('#pageJinji').pageReload({verify:'Pass'});">通过 </span>
                                                </div>
                                                <span>报名状态</span>
                                            </div>
		                               </th>
		                               <th width="5%" >
											<div class="caret">
                                                 <div class="caret-menu">
                                                 	<span class="btn active" onclick="$('#pageJinji').pageReload({state:''});">全部状态</span>
                                                     <span class="btn" onclick="$('#pageJinji').pageReload({state:'LIVE'});">已成功</span>
                                                     <span class="btn" onclick="$('#pageJinji').pageReload({state:'UNPAID'});">待支付</span>
                                                     <span class="btn" onclick="$('#pageJinji').pageReload({state:'FREEWAITINGVERIFY'});">无</span>
                                                 </div>
                                                 <span>付款状态</span>
                                             </div>
		                               </th>
		                               <th width="5%" >票种</th>
		                               <th width="5%" >付款</th>
		                               <th width="5%">报名成功时间</th>
		                               <th width="18%" >操作</th>
		                           </tr>
		                       </thead>
		                       <tbody>
		                       <script type="template" id="pageJinjiTabel">
								#for(data:content)#
									<tr>
										<td>#{data.createdAt}#</td>
										<td>#{data.number}#</td>
										<td>#{data.userName}# (#{data.userNumber}#)</td>
										<td>#{data.fullName}#</td>
                                        <td>#{data.phone}#</td>
                                        <td>#{data.groupName}#</td>
										<td>#{data.refName}#</td>
										<td><span data='look' data-text='#{data.text}#' class="table-icon table-icon-info"></span></td>
										<td>#{data.verifyDesc}#</td>
										<td>#{data.stateDesc}#</td>
										<td>#{data.epName}#</td>
										<td>#{data.orderItemPrice}#</td>
										<td>#{data.successTime}#</td>
										<td>
											<div class="group-btn">
											#if(data.verify=='Waiting')#
											<a class="btn" href="javascript:updateApply(#{data.id}#,'Pass')">通过</a>			
											<a class="btn" href="javascript:updateApply(#{data.id}#,'NotPass')">拒绝</a>
											#endif#
											</div>
										</td>
									</tr>
								#endfor#
								</script>
		                     </tbody>
		                 </table>
		                 <div id="pageJinji"></div>
		             </div>
		          </div>
		          </div>
         		</div>
			</div>
	
	</div>
  </body>
</html>